<template>
	
	<view>
		
	
		
		
		
			 <zero-custom-bar backgroundColor="white">
			        <view class="lefticon" slot='left' >
			            <button   border="0px" width="10rpx" @click="showDrawer" ><uni-icons type="bars"></uni-icons></button>
			        </view>
			        <view class="" >
			            <h3>订单管理</h3>
			        </view>
					<view class="righticon" slot='right' >
					    <button style="background-color: #f8f8f8;"   >新增订单</button>
					</view>
			        </zero-custom-bar>
			
			<genos-drawer ref="showleft" mode="left" :mask-click="false" statusBar="true">
				
					<button class="closebutton" @click="closeDrawer" type="primary"><icon type="clear"></icon></button>
					<navigator url="/pages/order/myOrder/index/index"><view class="list-item"><button >我的订单</button></view></navigator>
					<navigator url="/pages/order/departmentorder/index/departmentorder"><view class="list-item"><button>部门订单</button></view></navigator>
				    <navigator url="/pages/sys/home/index" open-type="switchTab"><view class="list-item"><button>主页</button></view></navigator>
			</genos-drawer>
			
			
			<view class="out"> 
			<view class="row" v-for="item in jsonData" :key="item.orderId" >
					<view class="item">
						<view class="dingdan-msg" :class="{active:getShowFlag(item.orderId)}">
						<view class="name" :class="{editinput:!isDisabled}"><input type="text" placeholder="请输入客户姓名" :value="item.clientName" :disabled="isDisabled"></view>
						<view class="ordertime" :class="{editinput:!isDisabled}" ><input    type="text" placeholder="请输入客户姓名" :value="item.createTime" :disabled="isDisabled"></view>
						<view class="orderStatus" :class="{editinput:!isDisabled}">订单状态：<input type="text" placeholder="请输入客户姓名" :value="item.orderStatus" disabled="true"></view>
						<view class="orderId" :class="{editinput:!isDisabled}">订单号：<input type="text" placeholder="请输入客户姓名" :value="item.orderId" disabled="true"></view>
						<view class="orderStatus" :class="{editinput:!isDisabled}">联系电话：{{item.phone}}</view>    
						<view class="orderStatus" :class="{editinput:!isDisabled}">预估金额：{{item.estimatedAmount}}</view>
						<view class="orderStatus" :class="{editinput:!isDisabled}">是否有售后：{{item.afterSales}}</view>
						<view class="orderStatus" :class="{editinput:!isDisabled}">售后补单编号：{{item.afterSalesOrder}}</view>
						<view class="orderStatus" :class="{editinput:!isDisabled}">备注：{{item.comment}}</view>
						<button style="background-color: #409eff;"  @click="editOrder()" >{{isDisabled?"编辑订单":"保存"}}</button>
						</view>
						
					</view>
					<view class="item">
						<view class="btn" ><button style="background-color: #888;" @click = "showTag(item.orderId)" >{{flags[item.orderId]?"收起":"详情"}}</button></view>
						<view class="btn" ><button style="background-color: orangered;">删除</button></view>
						
					 </view>
					 	
				
			　　　　
			</view>
			
					
				
				
			
			</view>		
		
			
		</view>
		
		
		
	</template>

<script>
import config from '../../../../common/config'
	export default {
		
		data() {
			return {
			   jsonData:[],
			   flags: [],
			  isDisabled: true
			}
		},
		onReady() {},
		methods: {
			//获取数据
			getData(){
				this.$u.api.order.listData2({
					"pageNo":1,
					"pageSize":10
				}).then((res)=>{
					console.log(res)
					this.jsonData = res.list
				})
			},
			
			getShowFlag(id){
				console.log("id"+id)
				
				//如果没有定义，就不显示
				if(this.flags[id]!=undefined&&this.flags[id]==true){
					
                     this.flags[id] = true;
                     return true;
				}else{
					  this.flags[id] = false;
				
					return false;
				}
			},
			showDrawer() {
				this.$refs.showleft.open();
			},
			closeDrawer() {
				this.$refs.showleft.close();
			},
			
		onLoad() {
			this.getData()
		},
		
		 showTag(e){
		
			  let flag =  this.getShowFlag(e)
			  
			  if(flag == true){
				  //
				  this.flags[e]=false;
			
			  }else{
				  this.flags[e]=true;
			  }
			  
			  //强制刷新
			this.$forceUpdate()

			  
			if(this.isDisabled == false){
				console.log("aaa")
			}	
				
			}, 
		
		editOrder(){
			
			
			this.isDisabled = !this.isDisabled;

			// console.log(this.$refs.name);
			
			
		}
		
	},
	
}
</script>

<style>
page {
		background-color: #f8f8f8;
	}
	
	
	
	
	.closebutton{
		margin-top: 100rpx;
		text-align: center;
		bottom: 10px;
		background-color: darkred;
		
	}
	.list-item{
		text-align: center;
		
		background-color: white;
		width: 100%;
		
	}
	
	.item{
		margin-right: 150rpx;
		/* display: inline-block; */
		
	}
	.btn{
		border: 0px;
		display: inline-block;
		
	}
	
.out{
	padding: 50rpx 30rpx;
	height: 100rpx;
}
.out .row{
	white-space: nowrap;
	padding:20rpx 0;
	border-bottom: 1px dotted #e4e4e4;
	
}
.out .row .name{
	font-zize:36rpx;
	padding-bottom: 15rpx;
	color: #333;
}
.out .row .ordertime{
	font-size: 28rpx;
	color: #888;
}


/* 初始高度，超出隐藏 */
    .dingdan-msg{
        height: 230rpx;
        overflow: hidden;
        line-height: 70rpx;
        border-bottom: 1px dashed #E8E7E7;
    }
/*  高度自适应，全部显示 */
    .active{
        height: auto;
        overflow: visible;
    }
	
	.editinput{
		background-color: yellow;
	}

</style>